// 引入路由api
import { createRouter, createWebHashHistory } from 'vue-router'

// 引入页面
const Home = () => import("@/views/Home.vue")
const About = () => import("@/views/About.vue")
const New = () => import("@/components/BasicSyntax.vue")
const NotFound = () => import("@/components/404.vue")


// 创建一个路由对象

// 配置路由的路径，页面
const routeConfig = [
    {
      path: '/home',
       component: Home,
       name:'home'
    },
    {
      path: '/about',
      component: About,
      name:'about'
    },
    {
        path:'/BasicSyntax',
        component:New
    },
    {
        path:'/:pathMatch(.*)*',
        component:NotFound,
        name:"not found"
    }
  ]

  const router = createRouter({
    //Hash模式
    history: createWebHashHistory(),
    routes: routeConfig
  })
  router.beforeEach((to, from) => {
    console.log('to', to);
    console.log('from', from);
  })
  router.afterEach((to, from) => {
    console.log('后置to', to);
    console.log('后置from', from);
  })
  
  
  // 对外暴露
  export default router

  